<template>
  <div class="app-container">
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>发货列表</span>
    </el-card>
    <div class="table-container">
      <el-table ref="deliverOrderTable" height="100%" style="width: 100%" :data="list" border>
        <el-table-column label="订单编号" width="180" align="center">
          <template #default="scope">{{ scope.row.orderSn }}</template>
        </el-table-column>
        <el-table-column label="收货人" width="180" align="center">
          <template #default="scope">{{ scope.row.receiverName }}</template>
        </el-table-column>
        <el-table-column label="手机号码" width="160" align="center">
          <template #default="scope">{{ scope.row.receiverPhone }}</template>
        </el-table-column>
        <el-table-column label="邮政编码" width="160" align="center">
          <template #default="scope">{{ scope.row.receiverPostCode }}</template>
        </el-table-column>
        <el-table-column label="收货地址" align="center">
          <template #default="scope">{{ scope.row.address }}</template>
        </el-table-column>
        <el-table-column label="配送方式" width="160" align="center">
          <template #default="scope">
            <el-select placeholder="请选择物流公司" v-model="scope.row.deliveryCompany" size="small">
              <el-option v-for="item in LOGISTICS_COMPANIES_SET" :key="item" :label="item" :value="item"> </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="物流单号" width="180" align="center">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.deliverySn"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px; text-align: center">
        <el-button @click="$router.back">取消</el-button>
        <el-button @click="confirm" type="primary">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { deliveryOrder } from '@/api/order'
import { LOGISTICS_COMPANIES_SET } from '@/constant'
import type { OrderDeliveryParams } from '@/models/order'
defineOptions({ name: 'DeliverOrderList' })

const props = withDefaults(defineProps<{ list: OrderDeliveryParams[] }>(), {
  list: () => [],
})
const router = useRouter()
async function confirm() {
  await ElMessageBox.confirm('是否要进行发货操作?', '提示', { type: 'warning' })
  await deliveryOrder(props.list)
  router.back()
  ElMessage.success('发货成功')
}
</script>
<style></style>
